body {
				background: #FFFFFF;
			}
			
			header {
				position: fixed;
				top: 0;
				z-index: 1000;
				width: 100%;
				height: 5rem;
				background: #36D9D6;
				display: flex;
				justify-content: center;
				align-items: center;
				align-content: space-between;
			}
			
			.back {
				height: 2rem;
				width: 2rem;
			}
			
			.title {
				height: 5rem;
				width: calc( 100% - 6rem);
				line-height: 5rem;
				font-size: 1.8rem;
			}
			
			#btn {
				float: left;
				width: 60%;
				height: 3rem;
				margin-left: 20%;
				margin-top: 1rem;
			}
			
			#btn>li {
				float: left;
				width: 50%;
				height: 3rem;
				line-height: 3rem;
				text-align: center;
				color: #FFFFFF;
				border: 1px solid #FFFFFF;
				margin: -1px;
			}
			
			#btn>li.currentPage {
				background: #FFFFFF;
				color: #000000;
			}
			
			.changeBtn {
				height: 2rem;
				width: 2rem;
				background: url(../../image/add.png)no-repeat;
				background-size: auto 2rem;
			}
			
			#content {
				position: absolute;
				top: 6rem;
				padding-bottom: 9rem;
				width: 100%;
			}
			
			#msgList {
				width: 100%;
				height: 100%;
				display: none;
			}
			
			#msgList>li {
				width: 100%;
				border-bottom: 1px solid #C9C9C9;
				display: flex;
				background: #FFFFFF;
				justify-content: center;
			}
			
			.friendIcon {
				width: 5rem;
				height: 5rem;
				border-radius: 50%;
				margin: 1rem;
			}
			
			.msgInfo {
				flex: 1;
				margin: 1rem 0;
				width: calc(100% - 17rem);
				height: 5rem;
			}
			
			.friendName {
				height: 2.8rem;
				font-size: 1.6rem;
				line-height: 2.8rem;
				width: 100%;
			}
			
			.msgText {
				width: 100%;
				color: #6D6D6D;
				height: 2.2rem;
				font-size: 1.5rem;
				line-height: 2.2rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.sendTime {
				width: 8rem;
				font-size: 1.4rem;
				margin: 1rem;
				line-height: 3rem;
				text-align: end;
				color: #6D6D6D;
			}
			
			#searchFriend {
				width: 90%;
				height: 3rem;
				margin-left: 5%;
				background: #FFFFFF;
				border-radius: 20px;
				border: 1px solid #D2D2D2;
			}
			
			#search {
				border: none;
				width: 100%;
				height: 3rem;
				line-height: 3rem;
				font-size: 1.6rem;
				background: url(../../image/search.png) 1rem center no-repeat;
				background-size: 2rem auto;
				text-indent: 4rem;
				color: #D2D2D2;
			}
			
			#search::-webkit-input-placeholder {
				color: #D2D2D2;
				font-size: 1.6rem;
			}
			
			#friendAreaBox {
				position: relative;
			}
			
			#friend {
				width: 100%;
				position: relative;
				margin-top: 1rem;
			}
			
			.friendList {
				width: 100%;
			}
			
			.letterPos {
				width: 100%;
				background: #F5F5F5;
				text-indent: 1rem;
				color: #969696;
			}
			
			.letterFriend {
				width: 100%;
			}
			
			.letterFriend>li {
				height: 5rem;
				width: 100%;
				line-height: 5rem;
				font-size: 1.8rem;
				display: flex;
				border-bottom: 1px solid #F5F5F5;
			}
			
			.letterIcon {
				height: 4rem;
				width: 4rem;
				border-radius: 50%;
				margin: 0.5rem 1rem;
				border: 1px solid #C2C2C2;
			}
			
			.letterName {
				flex: 1;
			}
			
			.letter {
				position: fixed;
				width: 2rem;
				height: 80%;
				left: calc(100% - 1.5rem);
				top: 50%;
				z-index: 10000;
				font-size: 12px;
				transform: translateY(-50%);
			}
			
			letter {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background: #CCCCCC;
				font-size: 50px;
				line-height: 100px;
				text-align: center;
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				display: none;
			}

			.git{
				width: 1.6rem;
				height: 1.6rem;
			}